
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项清单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .app-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            gap: 30px;
            height: calc(100vh - 40px);
        }

        .calendar-section {
            width: 480px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .selected-date-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .selected-date-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .selected-date-text {
            font-size: 1.5em;
            font-weight: 600;
            color: #333;
        }

        .today-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            cursor: pointer;
            font-size: 0.9em;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .today-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
        }

        .calendar {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            flex: 1;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .calendar-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            gap: 20px;
        }

        .nav-btn {
            background: #f0f0f0;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2em;
            transition: all 0.3s ease;
        }

        .nav-btn:hover {
            background: #e0e0e0;
            transform: scale(1.1);
        }

        .month-year {
            font-size: 1.5em;
            font-weight: 600;
            color: #333;
            min-width: 180px;
            text-align: center;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 12px;
        }

        .day-header {
            text-align: center;
            font-weight: 600;
            color: #666;
            padding: 10px 0;
            font-size: 0.9em;
        }

        .day {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.15em;
            font-weight: 500;
        }

        .day:hover {
            background: #f0f0f0;
            transform: translateY(-2px);
        }

        .day.other-month {
            color: #ccc;
        }

        .day.today {
            background: #e3f2fd;
            color: #1976d2;
            font-weight: 700;
        }

        .day.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: translateY(-5px) scale(1.08);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
            z-index: 10;
        }

        .day-indicator {
            position: absolute;
            bottom: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .day-indicator.has-tasks {
            background: #ff5252;
        }

        .day-indicator.all-completed {
            background: #9e9e9e;
        }

        .todo-section {
            flex: 1;
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        .todo-header {
            margin-bottom: 20px;
        }

        .todo-header h2 {
            font-size: 1.8em;
            color: #333;
            margin-bottom: 10px;
        }

        .add-todo {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .add-todo input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1em;
            transition: border-color 0.3s ease;
        }

        .add-todo input:focus {
            outline: none;
            border-color: #667eea;
        }

        .add-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            padding: 0 20px;
            cursor: pointer;
            font-size: 1em;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .add-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
        }

        .todo-list {
            flex: 1;
            overflow-y: auto;
            padding-right: 10px;
        }

        .todo-list::-webkit-scrollbar {
            width: 8px;
        }

        .todo-list::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .todo-list::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
        }

        .todo-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            background: #f9f9f9;
            transition: all 0.3s ease;
        }

        .todo-item:hover {
            background: #f0f0f0;
            transform: translateX(5px);
        }

        .todo-item.completed {
            opacity: 0.7;
            background: #e8f5e9;
        }

        .todo-item.completed .todo-text {
            text-decoration: line-through;
            color: #757575;
        }

        .todo-number {
            width: 25px;
            height: 25px;
            background: #667eea;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8em;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .todo-text {
            flex: 1;
            font-size: 1em;
            color: #333;
        }

        .todo-actions {
            display: flex;
            gap: 8px;
        }

        .action-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1.2em;
            padding: 5px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .edit-btn {
            color: #667eea;
        }

        .edit-btn:hover {
            background: rgba(102, 126, 234, 0.1);
            transform: scale(1.1);
        }

        .delete-btn {
            color: #f44336;
        }

        .delete-btn:hover {
            background: rgba(244, 67, 54, 0.1);
            transform: scale(1.1);
        }

        .complete-btn {
            color: #4caf50;
        }

        .complete-btn:hover {
            background: rgba(76, 175, 80, 0.1);
            transform: scale(1.1);
        }

        .edit-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .edit-modal-content {
            background: white;
            border-radius: 15px;
            padding: 25px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .edit-modal-header {
            margin-bottom: 20px;
        }

        .edit-modal-header h3 {
            font-size: 1.5em;
            color: #333;
        }

        .edit-modal-body {
            margin-bottom: 20px;
        }

        .edit-modal-body input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1em;
            transition: border-color 0.3s ease;
        }

        .edit-modal-body input:focus {
            outline: none;
            border-color: #667eea;
        }

        .edit-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .edit-modal-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: all 0.3s ease;
        }

        .cancel-btn {
            background: #e0e0e0;
            color: #333;
        }

        .cancel-btn:hover {
            background: #d0d0d0;
        }

        .save-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .save-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }

        .empty-state-icon {
            font-size: 3em;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .empty-state-text {
            font-size: 1.1em;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="calendar-section">
            <div class="selected-date-card">
                <div class="selected-date-text" id="selectedDateText">2025年8月15日</div>
                <button class="today-btn" id="todayBtn">今天</button>
            </div>
            <div class="calendar">
                <div class="calendar-header">
                    <div class="calendar-nav">
                        <button class="nav-btn" id="prevMonth">◀</button>
                        <div class="month-year" id="monthYear">2025年8月</div>
                        <button class="nav-btn" id="nextMonth">▶</button>
                    </div>
                </div>
                <div class="calendar-grid" id="calendarGrid">
                    <!-- 日历内容将通过JavaScript生成 -->
                </div>
            </div>
        </div>
        <div class="todo-section">
            <div class="todo-header">
                <h2>待办事项</h2>
                <div class="add-todo">
                    <input type="text" id="taskInput" placeholder="添加新的待办事项...">
                    <button class="add-btn" id="addBtn">添加</button>
                </div>
            </div>
            <div class="todo-list" id="todoList">
                <!-- 待办事项列表将通过JavaScript生成 -->
            </div>
        </div>
    </div>

    <div class="edit-modal" id="editModal">
        <div class="edit-modal-content">
            <div class="edit-modal-header">
                <h3>编辑待办事项</h3>
            </div>
            <div class="edit-modal-body">
                <input type="text" id="editInput" placeholder="编辑待办事项...">
            </div>
            <div class="edit-modal-footer">
                <button class="edit-modal-btn cancel-btn" id="cancelBtn">取消</button>
                <button class="edit-modal-btn save-btn" id="saveBtn">保存</button>
            </div>
        </div>
    </div>

    <script>
        // 初始化数据
        let todos = JSON.parse(localStorage.getItem('todos')) || {};
        let currentDate = new Date();
        let selectedDate = new Date();
        let editingTodoId = null;

        // DOM元素
        const calendarGrid = document.getElementById('calendarGrid');
        const monthYear = document.getElementById('monthYear');
        const prevMonthBtn = document.getElementById('prevMonth');
        const nextMonthBtn = document.getElementById('nextMonth');
        const todayBtn = document.getElementById('todayBtn');
        const taskInput = document.getElementById('taskInput');
        const addBtn = document.getElementById('addBtn');
        const todoList = document.getElementById('todoList');
        const editModal = document.getElementById('editModal');
        const editInput = document.getElementById('editInput');
        const cancelBtn = document.getElementById('cancelBtn');
        const saveBtn = document.getElementById('saveBtn');

        // 生成日历
        function renderCalendar() {
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth();
            
            // 设置月份和年份显示
            monthYear.textContent = `${year}年${month + 1}月`;
            
            // 清空日历网格
            calendarGrid.innerHTML = '';
            
            // 添加星期标题
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            weekdays.forEach(day => {
                const dayHeader = document.createElement('div');
                dayHeader.classList.add('day-header');
                dayHeader.textContent = day;
                calendarGrid.appendChild(dayHeader);
            });
            
            // 获取当月第一天和最后一天
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const prevLastDay = new Date(year, month, 0);
            
            // 添加上个月的日期
            const firstDayOfWeek = firstDay.getDay();
            for (let i = firstDayOfWeek - 1; i >= 0; i--) {
                const day = prevLastDay.getDate() - i;
                const dayElement = createDayElement(new Date(year, month - 1, day), true);
                calendarGrid.appendChild(dayElement);
            }
            
            // 添加当月的日期
            for (let i = 1; i <= lastDay.getDate(); i++) {
                const dayElement = createDayElement(new Date(year, month, i), false);
                calendarGrid.appendChild(dayElement);
            }
            
            // 添加下个月的日期
            const totalCells = calendarGrid.children.length - 7; // 减去星期标题
            const remainingCells = 35 - totalCells; // 5行 * 7列 - 已有单元格
            for (let i = 1; i <= remainingCells; i++) {
                const dayElement = createDayElement(new Date(year, month + 1, i), true);
                calendarGrid.appendChild(dayElement);
            }
        }

        // 创建日期元素
        function createDayElement(date, isOtherMonth) {
            const dayElement = document.createElement('div');
            dayElement.classList.add('day');
            
            if (isOtherMonth) {
                dayElement.classList.add('other-month');
            }
            
            // 检查是否是今天
            const today = new Date();
            if (date.getDate() === today.getDate() && 
                date.getMonth() === today.getMonth() && 
                date.getFullYear() === today.getFullYear()) {
                dayElement.classList.add('today');
            }
            
            // 检查是否是选中的日期
            if (date.getDate() === selectedDate.getDate() && 
                date.getMonth() === selectedDate.getMonth() && 
                date.getFullYear() === selectedDate.getFullYear()) {
                dayElement.classList.add('selected');
            }
            
            // 设置日期文本
            dayElement.textContent = date.getDate();
            
            // 添加任务指示器
            const dateKey = formatDateKey(date);
            if (todos[dateKey] && todos[dateKey].length > 0) {
                const indicator = document.createElement('div');
                indicator.classList.add('day-indicator');
                
                // 检查是否所有任务都已完成
                const allCompleted = todos[dateKey].every(task => task.completed);
                if (allCompleted) {
                    indicator.classList.add('all-completed');
                } else {
                    indicator.classList.add('has-tasks');
                }
                
                dayElement.appendChild(indicator);
            }
            
            // 添加点击事件
            dayElement.addEventListener('click', function() {
                selectedDate = new Date(date);
                updateSelectedDateText();
                renderCalendar();
                renderTodos();
            });
            
            return dayElement;
        }

        // 格式化日期键
        function formatDateKey(date) {
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }

        // 更新选中日期文本
        function updateSelectedDateText() {
            const year = selectedDate.getFullYear();
            const month = selectedDate.getMonth() + 1;
            const day = selectedDate.getDate();
            selectedDateText.textContent = `${year}年${month}月${day}日`;
        }

        // 渲染待办事项列表
        function renderTodos() {
            const dateKey = formatDateKey(selectedDate);
            const dayTodos = todos[dateKey] || [];
            
            // 清空列表
            todoList.innerHTML = '';
            
            if (dayTodos.length === 0) {
                // 显示空状态
                const emptyState = document.createElement('div');
                emptyState.classList.add('empty-state');
                emptyState.innerHTML = `
                    <div class="empty-state-icon">📅</div>
                    <p>该日期没有待办事项</p>
                `;
                todoList.appendChild(emptyState);
                return;
            }
            
            // 分离未完成和已完成的任务
            const incompleteTodos = dayTodos.filter(todo => !todo.completed);
            const completedTodos = dayTodos.filter(todo => todo.completed);
            
            // 渲染未完成的任务
            incompleteTodos.forEach((todo, index) => {
                const todoItem = createTodoItem(todo, index + 1);
                todoList.appendChild(todoItem);
            });
            
            // 渲染已完成的任务
            completedTodos.forEach((todo, index) => {
                const todoItem = createTodoItem(todo, incompleteTodos.length + index + 1);
                todoList.appendChild(todoItem);
            });
        }

        // 创建待办事项元素
        function createTodoItem(todo, number) {
            const todoItem = document.createElement('div');
            todoItem.classList.add('todo-item');
            
            if (todo.completed) {
                todoItem.classList.add('completed');
            }
            
            todoItem.innerHTML = `
                <div class="todo-number">${number}</div>
                <div class="todo-text">${todo.text}</div>
                <div class="todo-actions">
                    <button class="action-btn complete-btn" data-id="${todo.id}">
                        ${todo.completed ? '↩️' : '✓'}
                    </button>
                    <button class="action-btn edit-btn" data-id="${todo.id}">✏️</button>
                    <button class="action-btn delete-btn" data-id="${todo.id}">🗑️</button>
                </div>
            `;
            
            // 添加事件监听器
            const completeBtn = todoItem.querySelector('.complete-btn');
            const editBtn = todoItem.querySelector('.edit-btn');
            const deleteBtn = todoItem.querySelector('.delete-btn');
            
            completeBtn.addEventListener('click', () => toggleTodoComplete(todo.id));
            editBtn.addEventListener('click', () => openEditModal(todo.id));
            deleteBtn.addEventListener('click', () => deleteTodo(todo.id));
            
            return todoItem;
        }

        // 添加待办事项
        function addTodo() {
            const text = taskInput.value.trim();
            if (!text) return;
            
            const dateKey = formatDateKey(selectedDate);
            if (!todos[dateKey]) {
                todos[dateKey] = [];
            }
            
            const newTodo = {
                id: Date.now().toString(),
                text: text,
                completed: false
            };
            
            todos[dateKey].push(newTodo);
            saveTodos();
            renderTodos();
            renderCalendar();
            
            // 清空输入框
            taskInput.value = '';
        }

        // 切换待办事项完成状态
        function toggleTodoComplete(id) {
            const dateKey = formatDateKey(selectedDate);
            const todoIndex = todos[dateKey].findIndex(todo => todo.id === id);
            
            if (todoIndex !== -1) {
                todos[dateKey][todoIndex].completed = !todos[dateKey][todoIndex].completed;
                saveTodos();
                renderTodos();
                renderCalendar();
            }
        }

        // 打开编辑模态框
        function openEditModal(id) {
            const dateKey = formatDateKey(selectedDate);
            const todo = todos[dateKey].find(todo => todo.id === id);
            
            if (todo) {
                editingTodoId = id;
                editInput.value = todo.text;
                editModal.style.display = 'flex';
            }
        }

        // 关闭编辑模态框
        function closeEditModal() {
            editModal.style.display = 'none';
            editingTodoId = null;
            editInput.value = '';
        }

        // 保存编辑
        function saveEdit() {
            const text = editInput.value.trim();
            if (!text || !editingTodoId) return;
            
            const dateKey = formatDateKey(selectedDate);
            const todoIndex = todos[dateKey].findIndex(todo => todo.id === editingTodoId);
            
            if (todoIndex !== -1) {
                todos[dateKey][todoIndex].text = text;
                editingTodoId = null;
                renderTodos();
            }
        }

        // 删除待办事项
        function deleteTodo(id) {
            const dateKey = formatDateKey(selectedDate);
            todos[dateKey] = todos[dateKey].filter(todo => todo.id !== id);
            
            if (todos[dateKey].length === 0) {
                delete todos[dateKey];
            }
            
            saveTodos();
            renderTodos();
            renderCalendar();
        }

        // 回到今天
        function goToToday() {
            const today = new Date();
            currentDate = new Date(today);
            selectedDate = new Date(today);
            updateSelectedDateText();
            renderCalendar();
            renderTodos();
        }

        // 切换到上个月
        function goToPrevMonth() {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar();
        }

        // 切换到下个月
        function goToNextMonth() {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar();
        }

        // 保存待办事项到本地存储
        function saveTodos() {
            localStorage.setItem('todos', JSON.stringify(todos));
        }

        // 事件监听器
        prevMonthBtn.addEventListener('click', goToPrevMonth);
        nextMonthBtn.addEventListener('click', goToNextMonth);
        todayBtn.addEventListener('click', goToToday);
        addBtn.addEventListener('click', addTodo);
        taskInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                addTodo();
            }
        });
        cancelBtn.addEventListener('click', closeEditModal);
        saveBtn.addEventListener('click', saveEdit);

        // 点击模态框外部关闭
        editModal.addEventListener('click', (e) => {
            if (e.target === editModal) {
                closeEditModal();
            }
        });

        // 初始化应用
        function init() {
            updateSelectedDateText();
            renderCalendar();
            renderTodos();
        }

        // 启动应用
        init();
    </script>
</body>
</html>
